<template>
	<view class="">
		<view class="">
			<slideshow :swiperList="swiperList"></slideshow>
		</view>
		
		<view class="pd20">
			<imgTypeTab :imgTypeList="list" ref="imgTypeTab" @tabSelect="tabSelect"></imgTypeTab>
		</view>
		
		<view class="issue-list pd20 mt-3">
			<view @tap="cutIssueTab(item,index)" class="issue-item pt-2 pb-2 border-b" v-for="(item,index) in issueList" :key="index">
				<view class="d-flex a-center">
					<view class="index d-flex a-center j-center mr-1" >
						{{index+1}}
					</view>
					<view class="font-33 font-weight-700">
						{{item.title}}
					</view>
				</view>
				<view class="issue-cont mt-3 "  :class="issueIndex == index?'active':''" v-html="item.content">
					
				</view>
			
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import slideshow from "@/components/common/slideshow.vue"
	import imgTypeTab from "@/components/common/img-type-tab.vue"
	export default {
		
		data(){
			return {
				issueIndex:-1,
				swiperList:[],
				list:[
					{
						name:"常见问题"
					}
				],
				issueList:[
					
				]
			}
		},
		onLoad() {
			this.getBanner()
			this.getIssueList()
		},
		components: {
			slideshow,
			imgTypeTab
		},
		methods:{
			async getIssueList() {
				var data = await this.$api.getData({
					dbName: "wx_issue",
					pageIndex: 1,
					pageSize: 10,
				})
				this.issueList = data.rows
			},
			cutIssueTab(item,index){
				if(this.issueIndex == index){
					this.issueIndex = -1
					return
				}
				this.issueIndex = index
			},
			tabSelect(item) {
				// this.list = []
				// this.pageIndex = 1
				// this.none = ''
			},
			async getBanner() {
				var data = await this.$api.getData({
					dbName: "wx_banner",
					pageIndex: 1,
					pageSize: 10,
					sortRule: [
						{
							name: 'sort',
							type: 'desc'
						}
					]
				})
				this.swiperList = data.rows
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
</style>

<style lang="less" scoped>
	.issue-list{
		.issue-item{
			.index{
				width: 50rpx;
				height: 50rpx;
				background: #ff6d59;
				border-radius: 10rpx;
				color: #fff;
			}
			.issue-cont{
				padding: 20rpx;
				background: #f8f8f8;
				border-radius: 20rpx;
				transition:all 2s; 
				display: none;
			}
			.issue-cont.active{
				display: block;
			}
		}
	}
	
	@keyframes mymove{
		100%{
			height: 300rpx;
		}
	}
</style>